<!-- build time:Sun Jan 24 2021 18:59:51 GMT+0800 (GMT+08:00) --><!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#FFF"><link rel="icon" type="image/ico" sizes="32x32" href="//cdn.jsdelivr.net/gh/SerokSSR/blog-shoka@latest/images/favicon.ico"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link rel="alternate" type="application/rss+xml" title="小林书架" href="https://snow.js.org/rss.xml"><link rel="alternate" type="application/atom+xml" title="小林书架" href="https://snow.js.org/atom.xml"><link rel="alternate" type="application/json" title="小林书架" href="https://snow.js.org/feed.json"><link rel="stylesheet" href="//fonts.dogedoge.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CConsolas:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext"><link rel="stylesheet" href="//cdn.jsdelivr.net/gh/SerokSSR/blog-shoka@latest/css/app.css?v=0.2.5"><meta name="keywords" content="Hexo,博客,Gulp,PWA,应用程序,部署"><link rel="canonical" href="https://snow.js.org/hexo-gulp-pwa/"><title>Hexo：为你的博客配置 PWA - Hexo | 小林书架</title><meta name="generator" content="Hexo 5.3.0"></head><body itemscope itemtype="http://schema.org/WebPage"><div id="loading"><div class="cat"><div class="body"></div><div class="head"><div class="face"></div></div><div class="foot"><div class="tummy-end"></div><div class="bottom"></div><div class="legs left"></div><div class="legs right"></div></div><div class="paw"><div class="hands left"></div><div class="hands right"></div></div></div></div><div id="container"><header id="header" itemscope itemtype="http://schema.org/WPHeader"><div class="inner"><div id="brand"><div class="pjax"><h1 itemprop="name headline">Hexo：为你的博客配置 PWA</h1><div class="meta"><span class="item" title="创建时间：2020-08-04 00:00:00"><span class="icon"><i class="ic i-calendar"></i> </span><span class="text">发表于</span> <time itemprop="dateCreated datePublished" datetime="2020-08-04T00:00:00+08:00">2020-08-04</time> </span><span class="item" title="本文字数"><span class="icon"><i class="ic i-pen"></i> </span><span class="text">本文字数</span> <span>8k</span> <span class="text">字</span> </span><span class="item" title="阅读时长"><span class="icon"><i class="ic i-clock"></i> </span><span class="text">阅读时长</span> <span>7 分钟</span></span></div></div></div><nav id="nav"><div class="inner"><div class="toggle"><div class="lines" aria-label="切换导航栏"><span class="line"></span> <span class="line"></span> <span class="line"></span></div></div><ul class="menu"><li class="item title"><a href="/" rel="start">小林书架</a></li></ul><ul class="right"><li class="item theme"><i class="ic i-sun"></i></li><li class="item search"><i class="ic i-search"></i></li></ul></div></nav></div><div id="imgs" class="pjax"><img src="https://cdn.jsdelivr.net/gh/SerokSSR/img/pwa.svg"></div></header><div id="waves"><svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/></defs><g class="parallax"><use xlink:href="#gentle-wave" x="48" y="0"/><use xlink:href="#gentle-wave" x="48" y="3"/><use xlink:href="#gentle-wave" x="48" y="5"/><use xlink:href="#gentle-wave" x="48" y="7"/></g></svg></div><main><div class="inner"><div id="main" class="pjax"><div class="article wrap"><div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList"><i class="ic i-home"></i> <span><a href="/">首页</a></span><i class="ic i-angle-right"></i> <span class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/hexo/" itemprop="item" rel="index" title="分类于 Hexo"><span itemprop="name">Hexo</span></a><meta itemprop="position" content="1"></span></div><article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://snow.js.org/hexo-gulp-pwa/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="//cdn.jsdelivr.net/gh/SerokSSR/blog-shoka@latest/images/https://cdn.jsdelivr.net/gh/SerokSSR/cdn2/5339.jpg"><meta itemprop="name" content=""><meta itemprop="description" content=", Creator & OIer"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="小林书架"></span><div class="body md" itemprop="articleBody"><h1 id="hexo使用-gulp-为你的博客配置-pwa"><a class="anchor" href="#hexo使用-gulp-为你的博客配置-pwa">#</a> Hexo：使用 Gulp 为你的博客配置 PWA</h1><p>使用这个方法之前，请先卸载掉其它的 PWA 插件，并安装 Gulp 和 WorkBox。</p><figure class="highlight powershell"><figcaption data-lang="PowerShell"></figcaption><table><tr><td data-num="1"></td><td><pre>npm install gulp<span class="token operator">-</span><span class="token function">cli</span> <span class="token operator">-</span>g</pre></td></tr><tr><td data-num="2"></td><td><pre>npm install workbox<span class="token operator">-</span>build gulp <span class="token operator">--</span><span class="token function">save-dev</span></pre></td></tr></table></figure><p>本文参考<span class="exturl" data-url="aHR0cHM6Ly9pby1vaS5tZS90ZWNoL3B3YS12aWEtd29ya2JveC8=">利用 Workbox 实现博客的 PWA</span> 和<span class="exturl" data-url="aHR0cHM6Ly9kZW1vLmplcnJ5Yy5tZS9wb3N0cy80MDczZWRhLw=="> Butterfly 进阶教程</span>。</p><h2 id="写在前面"><a class="anchor" href="#写在前面">#</a> 写在前面</h2><p>渐进式网络应用程式（英语：Progressive Web Apps，简称：PWA）是一种普通网页或网站架构起来的网络应用程式，但它可以以传统应用程式或原生移动应用程式形式展示给用户。这种应用程式形态视图将目前最为现代化的浏览器提供的功能与行动装置的体验优势相结合。</p><p>当你的网站实现了 PWA，那就代表了</p><ul><li>用户可以添加你的博客到电脑 / 手机的桌面，以原生应用般的方式浏览你的博客</li><li>用户本地可以自动生成缓存，二次访问速度大大加快</li><li>用户可以离线浏览你的博客</li></ul><p>下面的 PWA 实现方法借助了 Gulp 插件，在站点有内容更新时，可以弹窗提醒用户刷新页面。</p><h2 id="开启主题相关设置"><a class="anchor" href="#开启主题相关设置">#</a> 开启主题相关设置</h2><p>以 Butterfly 主题为例，在 <code>butterfly.yml</code> 中开启 PWA 选项</p><p>实例：</p><figure class="highlight yml"><figcaption data-lang="YAML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token key atrule">pwa</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="2"></td><td><pre>  <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span></pre></td></tr><tr><td data-num="3"></td><td><pre>  <span class="token key atrule">manifest</span><span class="token punctuation">:</span> /manifest.json <span class="token comment"># 清单文件，下文将介绍如何生成</span></pre></td></tr><tr><td data-num="4"></td><td><pre>  <span class="token key atrule">theme_color</span><span class="token punctuation">:</span> <span class="token string">"#fff"</span> <span class="token comment"># 应用程序顶栏的背景色</span></pre></td></tr><tr><td data-num="5"></td><td><pre>  <span class="token key atrule">apple_touch_icon</span><span class="token punctuation">:</span> /img/pwa/apple<span class="token punctuation">-</span>touch<span class="token punctuation">-</span>icon.png <span class="token comment"># 添加至苹果移动设备的主屏幕后显示的图标，尽量使用 png 格式</span></pre></td></tr><tr><td data-num="6"></td><td><pre>  <span class="token key atrule">favicon_32_32</span><span class="token punctuation">:</span> /img/pwa/32.png <span class="token comment"># 32 * 32 像素，网页图标</span></pre></td></tr><tr><td data-num="7"></td><td><pre>  <span class="token key atrule">favicon_16_16</span><span class="token punctuation">:</span> /img/pwa/16.png <span class="token comment"># 16 * 16 像素，网页图标</span></pre></td></tr><tr><td data-num="8"></td><td><pre>  <span class="token key atrule">mask_icon</span><span class="token punctuation">:</span> /img/pwa/safari<span class="token punctuation">-</span>pinned<span class="token punctuation">-</span>tab.svg <span class="token comment"># 苹果电脑 Touch Bar 区域显示的收藏栏封面图，须使用 svg 格式</span></pre></td></tr></table></figure><p><strong>图片尺寸要求：</strong></p><ul><li>apple_touch_icon：192 * 192 像素</li><li>mask_icon：viewBox 的值必须是 0 0 16 16</li></ul><p>如果你的主题没有内置 PWA，下面附有 Butterfly 主题的 PWA 部分，可以根据你所用的主题调整下面的 Pug 模板，编译后插入到 html 生成模板的 head 处。</p><figure class="highlight pug"><figcaption data-lang="pug"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token tag">link<span class="token attributes"><span class="token punctuation">(</span><span class="token attr-name">rel</span><span class="token punctuation">=</span><span class="token attr-value"><span class="token string">"manifest"</span> href<span class="token operator">=</span><span class="token function">url_for</span><span class="token punctuation">(</span>theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>manifest</span><span class="token punctuation">)</span></span></span>)</pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token flow-control"><span class="token branch keyword">if</span></span>(theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>theme_color) </pre></td></tr><tr><td data-num="3"></td><td><pre>  <span class="token tag">meta<span class="token attributes"><span class="token punctuation">(</span><span class="token attr-name">name</span><span class="token punctuation">=</span><span class="token attr-value"><span class="token string">"theme-color"</span> content<span class="token operator">=</span>theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>theme_color</span><span class="token punctuation">)</span></span></span></pre></td></tr><tr><td data-num="4"></td><td><pre><span class="token flow-control"><span class="token branch keyword">if</span></span>(theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>theme_color) </pre></td></tr><tr><td data-num="5"></td><td><pre>  <span class="token tag">meta<span class="token attributes"><span class="token punctuation">(</span><span class="token attr-name">name</span><span class="token punctuation">=</span><span class="token attr-value"><span class="token string">"msapplication-TileColor"</span> content<span class="token operator">=</span>theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>theme_color</span><span class="token punctuation">)</span></span></span></pre></td></tr><tr><td data-num="6"></td><td><pre><span class="token flow-control"><span class="token branch keyword">if</span></span>(theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>apple_touch_icon) </pre></td></tr><tr><td data-num="7"></td><td><pre>  <span class="token tag">link<span class="token attributes"><span class="token punctuation">(</span><span class="token attr-name">rel</span><span class="token punctuation">=</span><span class="token attr-value"><span class="token string">"apple-touch-icon"</span> sizes<span class="token operator">=</span><span class="token string">"180x180"</span> href<span class="token operator">=</span><span class="token function">url_for</span><span class="token punctuation">(</span>theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>apple_touch_icon</span><span class="token punctuation">)</span></span></span>)</pre></td></tr><tr><td data-num="8"></td><td><pre><span class="token flow-control"><span class="token branch keyword">if</span></span>(theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>favicon_32_32) </pre></td></tr><tr><td data-num="9"></td><td><pre>  <span class="token tag">link<span class="token attributes"><span class="token punctuation">(</span><span class="token attr-name">rel</span><span class="token punctuation">=</span><span class="token attr-value"><span class="token string">"icon"</span> type<span class="token operator">=</span><span class="token string">"image/png"</span> sizes<span class="token operator">=</span><span class="token string">"32x32"</span> href<span class="token operator">=</span><span class="token function">url_for</span><span class="token punctuation">(</span>theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>favicon_32_32</span><span class="token punctuation">)</span></span></span>)</pre></td></tr><tr><td data-num="10"></td><td><pre><span class="token flow-control"><span class="token branch keyword">if</span></span>(theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>favicon_16_16)</pre></td></tr><tr><td data-num="11"></td><td><pre>  <span class="token tag">link<span class="token attributes"><span class="token punctuation">(</span><span class="token attr-name">rel</span><span class="token punctuation">=</span><span class="token attr-value"><span class="token string">"icon"</span> type<span class="token operator">=</span><span class="token string">"image/png"</span> sizes<span class="token operator">=</span><span class="token string">"16x16"</span> href<span class="token operator">=</span><span class="token function">url_for</span><span class="token punctuation">(</span>theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>favicon_16_16</span><span class="token punctuation">)</span></span></span>)</pre></td></tr><tr><td data-num="12"></td><td><pre><span class="token flow-control"><span class="token branch keyword">if</span></span>(theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>mask_icon)</pre></td></tr><tr><td data-num="13"></td><td><pre>  <span class="token tag">link<span class="token attributes"><span class="token punctuation">(</span><span class="token attr-name">rel</span><span class="token punctuation">=</span><span class="token attr-value"><span class="token string">"mask-icon"</span> href<span class="token operator">=</span><span class="token function">url_for</span><span class="token punctuation">(</span>theme<span class="token punctuation">.</span>pwa<span class="token punctuation">.</span>mask_icon</span><span class="token punctuation">)</span></span></span> <span class="token plain-text">color="#5bbad5")</span></pre></td></tr></table></figure><h2 id="配置-manifestjson"><a class="anchor" href="#配置-manifestjson">#</a> 配置 <code>manifest.json</code></h2><p>创建 <code>manifest.json</code> ，路径应与配置文件中所填路径相同。</p><p><b>实例及配置说明：</b></p><figure class="highlight json"><figcaption data-lang="JSON"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="2"></td><td><pre>  <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Serok's Blog"</span><span class="token punctuation">,</span> <span class="token comment">// 应用全称</span></pre></td></tr><tr><td data-num="3"></td><td><pre>  <span class="token property">"short_name"</span><span class="token operator">:</span> <span class="token string">"Seeker"</span><span class="token punctuation">,</span> <span class="token comment">// 应用简称</span></pre></td></tr><tr><td data-num="4"></td><td><pre>  <span class="token property">"theme_color"</span><span class="token operator">:</span> <span class="token string">"#49b1f5"</span><span class="token punctuation">,</span> <span class="token comment">// 应用主题色</span></pre></td></tr><tr><td data-num="5"></td><td><pre>  <span class="token property">"background_color"</span><span class="token operator">:</span> <span class="token string">"#49b1f5"</span><span class="token punctuation">,</span> <span class="token comment">// 加载应用时的背景色</span></pre></td></tr><tr><td data-num="6"></td><td><pre>  <span class="token property">"display"</span><span class="token operator">:</span> <span class="token string">"minimal-ui"</span><span class="token punctuation">,</span> <span class="token comment">// 首選顯示模式</span></pre></td></tr><tr><td data-num="7"></td><td><pre>  <span class="token comment">// 更多顯示模式："fullscreen", "standalone", "browser"</span></pre></td></tr><tr><td data-num="8"></td><td><pre>  <span class="token property">"scope"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="9"></td><td><pre>  <span class="token property">"start_url"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="10"></td><td><pre>  <span class="token property">"icons"</span><span class="token operator">:</span> <span class="token punctuation">[</span> </pre></td></tr><tr><td data-num="11"></td><td><pre>    <span class="token comment">// 指定 icons 參數，用來適配不同設備</span></pre></td></tr><tr><td data-num="12"></td><td><pre>    <span class="token comment">// 需為 png 格式，至少包含一个 192 * 192 像素的圖標</span></pre></td></tr><tr><td data-num="13"></td><td><pre>    <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="14"></td><td><pre>      <span class="token property">"src"</span><span class="token operator">:</span> <span class="token string">"https://snow.js.org/image/pwaicons/192.png"</span><span class="token punctuation">,</span> <span class="token comment">// 建议采用绝对路径</span></pre></td></tr><tr><td data-num="15"></td><td><pre>      <span class="token property">"sizes"</span><span class="token operator">:</span> <span class="token string">"192x192"</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="16"></td><td><pre>      <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"image/png"</span></pre></td></tr><tr><td data-num="17"></td><td><pre>    <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="18"></td><td><pre>  <span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="19"></td><td><pre>  <span class="token property">"splash_pages"</span><span class="token operator">:</span> <span class="token null keyword">null</span> <span class="token comment">// 自定義启动动画</span></pre></td></tr><tr><td data-num="20"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr></table></figure><p>default</p><p>Hexo 采用的是严格 Json 规范，因此 <code>manifest.json</code> 文件配置好后，需删除文件中的所有注释。</p><h2 id="安装插件"><a class="anchor" href="#安装插件">#</a> 安装插件</h2><p>在命令行中输入</p><figure class="highlight powershell"><figcaption data-lang="PowerShell"></figcaption><table><tr><td data-num="1"></td><td><pre>npm install workbox<span class="token operator">-</span>build gulp <span class="token operator">--</span><span class="token function">save-dev</span></pre></td></tr></table></figure><h2 id="创建-gulpfilejs-文件"><a class="anchor" href="#创建-gulpfilejs-文件">#</a> 创建 <code>gulpfile.js</code> 文件</h2><p>在博客的根目录下，创建一个 <code>gulpfile.js</code> 文件</p><figure class="highlight js"><figcaption data-lang="JavaScript"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token keyword">const</span> gulp <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gulp"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token keyword">const</span> workbox <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"workbox-build"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="3"></td><td><pre></pre></td></tr><tr><td data-num="4"></td><td><pre>gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'generate-service-worker'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="5"></td><td><pre>    <span class="token keyword">return</span> workbox<span class="token punctuation">.</span><span class="token function">injectManifest</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="6"></td><td><pre>        swSrc<span class="token operator">:</span> <span class="token string">'./sw-template.js'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="7"></td><td><pre>        swDest<span class="token operator">:</span> <span class="token string">'./public/sw.js'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="8"></td><td><pre>        globDirectory<span class="token operator">:</span> <span class="token string">'./public'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="9"></td><td><pre>        globPatterns<span class="token operator">:</span> <span class="token punctuation">[</span></pre></td></tr><tr><td data-num="10"></td><td><pre>            <span class="token string">"**/*.&#123;html,css,js,json,woff2&#125;"</span></pre></td></tr><tr><td data-num="11"></td><td><pre>        <span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="12"></td><td><pre>        modifyURLPrefix<span class="token operator">:</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="13"></td><td><pre>            <span class="token string">""</span><span class="token operator">:</span> <span class="token string">"./"</span></pre></td></tr><tr><td data-num="14"></td><td><pre>        <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="16"></td><td><pre><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="17"></td><td><pre></pre></td></tr><tr><td data-num="18"></td><td><pre>gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">"build"</span><span class="token punctuation">,</span> gulp<span class="token punctuation">.</span><span class="token function">series</span><span class="token punctuation">(</span><span class="token string">"generate-service-worker"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr></table></figure><h2 id="创建-sw-templatejs-文件"><a class="anchor" href="#创建-sw-templatejs-文件">#</a> 创建 <code>sw-template.js</code> 文件</h2><p>在博客的根目录下，创建一个 <code>sw-template.js</code> 文件</p><figure class="highlight js"><figcaption data-lang="JavaScript"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token keyword">const</span> workboxVersion <span class="token operator">=</span> <span class="token string">'5.1.3'</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="2"></td><td><pre></pre></td></tr><tr><td data-num="3"></td><td><pre><span class="token function">importScripts</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://storage.googleapis.com/workbox-cdn/releases/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>workboxVersion<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">/workbox-sw.js</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="4"></td><td><pre></pre></td></tr><tr><td data-num="5"></td><td><pre>workbox<span class="token punctuation">.</span>core<span class="token punctuation">.</span><span class="token function">setCacheNameDetails</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="6"></td><td><pre>    prefix<span class="token operator">:</span> <span class="token string">"Serok's Blog"</span></pre></td></tr><tr><td data-num="7"></td><td><pre><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="8"></td><td><pre></pre></td></tr><tr><td data-num="9"></td><td><pre>workbox<span class="token punctuation">.</span>core<span class="token punctuation">.</span><span class="token function">skipWaiting</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="10"></td><td><pre></pre></td></tr><tr><td data-num="11"></td><td><pre>workbox<span class="token punctuation">.</span>core<span class="token punctuation">.</span><span class="token function">clientsClaim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="12"></td><td><pre></pre></td></tr><tr><td data-num="13"></td><td><pre>workbox<span class="token punctuation">.</span>precaching<span class="token punctuation">.</span><span class="token function">precacheAndRoute</span><span class="token punctuation">(</span>self<span class="token punctuation">.</span>__WB_MANIFEST<span class="token punctuation">,</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="14"></td><td><pre>    directoryIndex<span class="token operator">:</span> <span class="token keyword">null</span></pre></td></tr><tr><td data-num="15"></td><td><pre><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="16"></td><td><pre></pre></td></tr><tr><td data-num="17"></td><td><pre>workbox<span class="token punctuation">.</span>precaching<span class="token punctuation">.</span><span class="token function">cleanupOutdatedCaches</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="18"></td><td><pre></pre></td></tr><tr><td data-num="19"></td><td><pre><span class="token comment">// Images</span></pre></td></tr><tr><td data-num="20"></td><td><pre>workbox<span class="token punctuation">.</span>routing<span class="token punctuation">.</span><span class="token function">registerRoute</span><span class="token punctuation">(</span></pre></td></tr><tr><td data-num="21"></td><td><pre>    <span class="token regex">/\.(?:png|jpg|jpeg|gif|bmp|webp|svg|ico)$/</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="22"></td><td><pre>    <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>strategies<span class="token punctuation">.</span>CacheFirst</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="23"></td><td><pre>        cacheName<span class="token operator">:</span> <span class="token string">"images"</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="24"></td><td><pre>        plugins<span class="token operator">:</span> <span class="token punctuation">[</span></pre></td></tr><tr><td data-num="25"></td><td><pre>            <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>expiration<span class="token punctuation">.</span>ExpirationPlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="26"></td><td><pre>                maxEntries<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="27"></td><td><pre>                maxAgeSeconds<span class="token operator">:</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">30</span></pre></td></tr><tr><td data-num="28"></td><td><pre>            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="29"></td><td><pre>            <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>cacheableResponse<span class="token punctuation">.</span>CacheableResponsePlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="30"></td><td><pre>                statuses<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="31"></td><td><pre>            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="32"></td><td><pre>        <span class="token punctuation">]</span></pre></td></tr><tr><td data-num="33"></td><td><pre>    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="34"></td><td><pre><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="35"></td><td><pre></pre></td></tr><tr><td data-num="36"></td><td><pre><span class="token comment">// Fonts</span></pre></td></tr><tr><td data-num="37"></td><td><pre>workbox<span class="token punctuation">.</span>routing<span class="token punctuation">.</span><span class="token function">registerRoute</span><span class="token punctuation">(</span></pre></td></tr><tr><td data-num="38"></td><td><pre>    <span class="token regex">/\.(?:eot|ttf|woff|woff2)$/</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="39"></td><td><pre>    <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>strategies<span class="token punctuation">.</span>CacheFirst</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="40"></td><td><pre>        cacheName<span class="token operator">:</span> <span class="token string">"fonts"</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="41"></td><td><pre>        plugins<span class="token operator">:</span> <span class="token punctuation">[</span></pre></td></tr><tr><td data-num="42"></td><td><pre>            <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>expiration<span class="token punctuation">.</span>ExpirationPlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="43"></td><td><pre>                maxEntries<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="44"></td><td><pre>                maxAgeSeconds<span class="token operator">:</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">30</span></pre></td></tr><tr><td data-num="45"></td><td><pre>            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="46"></td><td><pre>            <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>cacheableResponse<span class="token punctuation">.</span>CacheableResponsePlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="47"></td><td><pre>                statuses<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="48"></td><td><pre>            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="49"></td><td><pre>        <span class="token punctuation">]</span></pre></td></tr><tr><td data-num="50"></td><td><pre>    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="51"></td><td><pre><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="52"></td><td><pre></pre></td></tr><tr><td data-num="53"></td><td><pre><span class="token comment">// Google Fonts</span></pre></td></tr><tr><td data-num="54"></td><td><pre>workbox<span class="token punctuation">.</span>routing<span class="token punctuation">.</span><span class="token function">registerRoute</span><span class="token punctuation">(</span></pre></td></tr><tr><td data-num="55"></td><td><pre>    <span class="token regex">/^https:\/\/fonts\.googleapis\.com/</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="56"></td><td><pre>    <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>strategies<span class="token punctuation">.</span>StaleWhileRevalidate</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="57"></td><td><pre>        cacheName<span class="token operator">:</span> <span class="token string">"google-fonts-stylesheets"</span></pre></td></tr><tr><td data-num="58"></td><td><pre>    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="59"></td><td><pre><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="60"></td><td><pre>workbox<span class="token punctuation">.</span>routing<span class="token punctuation">.</span><span class="token function">registerRoute</span><span class="token punctuation">(</span></pre></td></tr><tr><td data-num="61"></td><td><pre>    <span class="token regex">/^https:\/\/fonts\.gstatic\.com/</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="62"></td><td><pre>    <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>strategies<span class="token punctuation">.</span>CacheFirst</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="63"></td><td><pre>        cacheName<span class="token operator">:</span> <span class="token string">'google-fonts-webfonts'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="64"></td><td><pre>        plugins<span class="token operator">:</span> <span class="token punctuation">[</span></pre></td></tr><tr><td data-num="65"></td><td><pre>            <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>expiration<span class="token punctuation">.</span>ExpirationPlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="66"></td><td><pre>                maxEntries<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="67"></td><td><pre>                maxAgeSeconds<span class="token operator">:</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">30</span></pre></td></tr><tr><td data-num="68"></td><td><pre>            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="69"></td><td><pre>            <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>cacheableResponse<span class="token punctuation">.</span>CacheableResponsePlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="70"></td><td><pre>                statuses<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="71"></td><td><pre>            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="72"></td><td><pre>        <span class="token punctuation">]</span></pre></td></tr><tr><td data-num="73"></td><td><pre>    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="74"></td><td><pre><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="75"></td><td><pre></pre></td></tr><tr><td data-num="76"></td><td><pre><span class="token comment">// Static Libraries</span></pre></td></tr><tr><td data-num="77"></td><td><pre>workbox<span class="token punctuation">.</span>routing<span class="token punctuation">.</span><span class="token function">registerRoute</span><span class="token punctuation">(</span></pre></td></tr><tr><td data-num="78"></td><td><pre>    <span class="token regex">/^https:\/\/cdn\.jsdelivr\.net/</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="79"></td><td><pre>    <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>strategies<span class="token punctuation">.</span>CacheFirst</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="80"></td><td><pre>        cacheName<span class="token operator">:</span> <span class="token string">"static-libs"</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="81"></td><td><pre>        plugins<span class="token operator">:</span> <span class="token punctuation">[</span></pre></td></tr><tr><td data-num="82"></td><td><pre>            <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>expiration<span class="token punctuation">.</span>ExpirationPlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="83"></td><td><pre>                maxEntries<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="84"></td><td><pre>                maxAgeSeconds<span class="token operator">:</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">30</span></pre></td></tr><tr><td data-num="85"></td><td><pre>            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="86"></td><td><pre>            <span class="token keyword">new</span> <span class="token class-name">workbox<span class="token punctuation">.</span>cacheableResponse<span class="token punctuation">.</span>CacheableResponsePlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="87"></td><td><pre>                statuses<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="88"></td><td><pre>            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="89"></td><td><pre>        <span class="token punctuation">]</span></pre></td></tr><tr><td data-num="90"></td><td><pre>    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="91"></td><td><pre><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="92"></td><td><pre></pre></td></tr><tr><td data-num="93"></td><td><pre>workbox<span class="token punctuation">.</span>googleAnalytics<span class="token punctuation">.</span><span class="token function">initialize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr></table></figure><p><b>注意：把 prefix 修改为你博客的名字（最好用英文）。</b></p><p>上面的文件涵盖了大多数资源的缓存策略。如果你想缓存其他类型的资源（例如一些国内的镜像 CDN 库），或者想使用其他的缓存方式，请自行<span class="exturl" data-url="aHR0cHM6Ly9kZXZlbG9wZXJzLmdvb2dsZS5jb20vd2ViL3Rvb2xzL3dvcmtib3gvbW9kdWxlcy93b3JrYm94LXN0cmF0ZWdpZXM=">查看相关文档</span>并添加。</p><h2 id="添加-js-进主题"><a class="anchor" href="#添加-js-进主题">#</a> 添加 js 进主题</h2><p>配置 <code>butterfly.yml</code> , 添加需要的 css 和 js</p><figure class="highlight yml"><figcaption data-lang="YAML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token key atrule">inject</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="2"></td><td><pre>  <span class="token key atrule">head</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="3"></td><td><pre>    <span class="token punctuation">-</span> <span class="token string">'&lt;style type="text/css">.app-refresh&#123;position:fixed;top:-2.2rem;left:0;right:0;z-index:99999;padding:0 1rem;font-size:15px;height:2.2rem;transition:all .3s ease&#125;.app-refresh-wrap&#123;display:flex;color:#fff;height:100%;align-items:center;justify-content:center&#125;.app-refresh-wrap a&#123;color:#fff;text-decoration:underline;cursor:pointer&#125;&lt;/style>'</span></pre></td></tr><tr><td data-num="4"></td><td><pre>  <span class="token key atrule">bottom</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="5"></td><td><pre>    <span class="token punctuation">-</span> <span class="token string">'&lt;div class="app-refresh" id="app-refresh"> &lt;div class="app-refresh-wrap"> &lt;label>✨ 网站已更新最新版本 👉&lt;/label> &lt;a href="javascript:void(0)" onclick="location.reload()">点击刷新&lt;/a> &lt;/div>&lt;/div>&lt;script>function showNotification()&#123;if(GLOBAL_CONFIG.Snackbar)&#123;var t="light"===document.documentElement.getAttribute("data-theme")?GLOBAL_CONFIG.Snackbar.bgLight:GLOBAL_CONFIG.Snackbar.bgDark,e=GLOBAL_CONFIG.Snackbar.position;Snackbar.show(&#123;text:"已更新最新版本",backgroundColor:t,duration:5e5,pos:e,actionText:"点击刷新",actionTextColor:"#fff",onActionClick:function(t)&#123;location.reload()&#125;&#125;)&#125;else&#123;var o=`top: 0; background: $&#123;"light"===document.documentElement.getAttribute("data-theme")?"#49b1f5":"#1f1f1f"&#125;;`;document.getElementById("app-refresh").style.cssText=o&#125;&#125;"serviceWorker"in navigator&amp;&amp;(navigator.serviceWorker.controller&amp;&amp;navigator.serviceWorker.addEventListener("controllerchange",function()&#123;showNotification()&#125;),window.addEventListener("load",function()&#123;navigator.serviceWorker.register("/sw.js")&#125;));&lt;/script>'</span></pre></td></tr></table></figure><p>同样，如果你使用的不是 Butterfly 主题，可以在所示代码的基础上修改以适配你的主题。以下是展开后的代码，便于修改调试。</p><h3 id="以下代码请插入到头部-head-之前"><a class="anchor" href="#以下代码请插入到头部-head-之前">#</a> 以下代码请插入到头部 <code>&lt;/head&gt;</code> 之前：</h3><figure class="highlight html"><figcaption data-lang="HTML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span></span></pre></td></tr><tr><td data-num="2"></td><td><pre>  <span class="token selector">.app-refresh</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="3"></td><td><pre>    <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="4"></td><td><pre>    <span class="token property">top</span><span class="token punctuation">:</span> -2.2rem<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="5"></td><td><pre>    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="6"></td><td><pre>    <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="7"></td><td><pre>    <span class="token property">z-index</span><span class="token punctuation">:</span> 99999<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="8"></td><td><pre>    <span class="token property">padding</span><span class="token punctuation">:</span> 0 1rem<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="9"></td><td><pre>    <span class="token property">font-size</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="10"></td><td><pre>    <span class="token property">height</span><span class="token punctuation">:</span> 2.2rem<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="11"></td><td><pre>    <span class="token property">transition</span><span class="token punctuation">:</span> all 0.3s ease<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="12"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="13"></td><td><pre>  <span class="token selector">.app-refresh-wrap</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="14"></td><td><pre>    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>    <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="16"></td><td><pre>    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="17"></td><td><pre>    <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="18"></td><td><pre>    <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="19"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="20"></td><td><pre></pre></td></tr><tr><td data-num="21"></td><td><pre>  <span class="token selector">.app-refresh-wrap span</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="22"></td><td><pre>    <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="23"></td><td><pre>    <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="24"></td><td><pre>    <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="25"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="26"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span></pre></td></tr></table></figure><h3 id="以下代码请插入到底部-body-之前"><a class="anchor" href="#以下代码请插入到底部-body-之前">#</a> 以下代码请插入到底部 <code>&lt;/body&gt;</code> 之前：</h3><figure class="highlight html"><figcaption data-lang="HTML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app-refresh<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app-refresh<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="2"></td><td><pre>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app-refresh-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="3"></td><td><pre>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">></span></span>✨ 网站已更新最新版本 👉<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="4"></td><td><pre>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:void(0)<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>location.reload()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点击刷新<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="5"></td><td><pre>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="6"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="7"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span></span></pre></td></tr><tr><td data-num="8"></td><td><pre>  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'serviceWorker'</span> <span class="token keyword">in</span> navigator<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="9"></td><td><pre>    <span class="token keyword">if</span> <span class="token punctuation">(</span>navigator<span class="token punctuation">.</span>serviceWorker<span class="token punctuation">.</span>controller<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="10"></td><td><pre>      navigator<span class="token punctuation">.</span>serviceWorker<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'controllerchange'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="11"></td><td><pre>        <span class="token function">showNotification</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="12"></td><td><pre>      <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="13"></td><td><pre>    <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="14"></td><td><pre></pre></td></tr><tr><td data-num="15"></td><td><pre>    window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'load'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="16"></td><td><pre>      navigator<span class="token punctuation">.</span>serviceWorker<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token string">'/sw.js'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="17"></td><td><pre>    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="18"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="19"></td><td><pre></pre></td></tr><tr><td data-num="20"></td><td><pre>  <span class="token keyword">function</span> <span class="token function">showNotification</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="21"></td><td><pre>    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token constant">GLOBAL_CONFIG</span><span class="token punctuation">.</span>Snackbar<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="22"></td><td><pre>      <span class="token keyword">var</span> snackbarBg <span class="token operator">=</span></pre></td></tr><tr><td data-num="23"></td><td><pre>        document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'data-theme'</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'light'</span></pre></td></tr><tr><td data-num="24"></td><td><pre>          <span class="token operator">?</span> <span class="token constant">GLOBAL_CONFIG</span><span class="token punctuation">.</span>Snackbar<span class="token punctuation">.</span>bgLight</pre></td></tr><tr><td data-num="25"></td><td><pre>          <span class="token operator">:</span> <span class="token constant">GLOBAL_CONFIG</span><span class="token punctuation">.</span>Snackbar<span class="token punctuation">.</span>bgDark</pre></td></tr><tr><td data-num="26"></td><td><pre>      <span class="token keyword">var</span> snackbarPos <span class="token operator">=</span> <span class="token constant">GLOBAL_CONFIG</span><span class="token punctuation">.</span>Snackbar<span class="token punctuation">.</span>position</pre></td></tr><tr><td data-num="27"></td><td><pre>      Snackbar<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="28"></td><td><pre>        text<span class="token operator">:</span> <span class="token string">'已更新最新版本'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="29"></td><td><pre>        backgroundColor<span class="token operator">:</span> snackbarBg<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="30"></td><td><pre>        duration<span class="token operator">:</span> <span class="token number">500000</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="31"></td><td><pre>        pos<span class="token operator">:</span> snackbarPos<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="32"></td><td><pre>        actionText<span class="token operator">:</span> <span class="token string">'点击刷新'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="33"></td><td><pre>        actionTextColor<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="34"></td><td><pre>        <span class="token function-variable function">onActionClick</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="35"></td><td><pre>          location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="36"></td><td><pre>        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="37"></td><td><pre>      <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="38"></td><td><pre>    <span class="token punctuation">&#125;</span> <span class="token keyword">else</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="39"></td><td><pre>      <span class="token keyword">var</span> showBg <span class="token operator">=</span></pre></td></tr><tr><td data-num="40"></td><td><pre>        document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'data-theme'</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'light'</span></pre></td></tr><tr><td data-num="41"></td><td><pre>          <span class="token operator">?</span> <span class="token string">'#49b1f5'</span></pre></td></tr><tr><td data-num="42"></td><td><pre>          <span class="token operator">:</span> <span class="token string">'#1f1f1f'</span></pre></td></tr><tr><td data-num="43"></td><td><pre>      <span class="token keyword">var</span> cssText <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">top: 0; background: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>showBg<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">;</span><span class="token template-punctuation string">`</span></span></pre></td></tr><tr><td data-num="44"></td><td><pre>      document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'app-refresh'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>cssText <span class="token operator">=</span> cssText</pre></td></tr><tr><td data-num="45"></td><td><pre>    <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="46"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="47"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></pre></td></tr></table></figure><h2 id="运行"><a class="anchor" href="#运行">#</a> 运行</h2><p>为了方便每次部署，可以在你的博客根目录下新建 <code>deploy.sh</code> ，添加以下内容：</p><figure class="highlight bash"><figcaption data-lang="bash"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token shebang important">#!/bin/bash</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token builtin class-name">echo</span> <span class="token string">"Start"</span></pre></td></tr><tr><td data-num="3"></td><td><pre>hexo clean</pre></td></tr><tr><td data-num="4"></td><td><pre>hexo generate</pre></td></tr><tr><td data-num="5"></td><td><pre>gulp</pre></td></tr><tr><td data-num="6"></td><td><pre>hexo deploy</pre></td></tr><tr><td data-num="7"></td><td><pre><span class="token builtin class-name">echo</span> <span class="token string">"Finish"</span></pre></td></tr><tr><td data-num="8"></td><td><pre><span class="token builtin class-name">echo</span> 按任意键继续</pre></td></tr><tr><td data-num="9"></td><td><pre><span class="token builtin class-name">read</span> -n <span class="token number">1</span></pre></td></tr></table></figure><p>然后每次部署就可以直接运行这个脚本了。</p><div class="tags"><a href="/tags/hexo/" rel="tag"><i class="ic i-tag"></i> Hexo</a> <a href="/tags/%E5%8D%9A%E5%AE%A2/" rel="tag"><i class="ic i-tag"></i> 博客</a> <a href="/tags/gulp/" rel="tag"><i class="ic i-tag"></i> Gulp</a> <a href="/tags/pwa/" rel="tag"><i class="ic i-tag"></i> PWA</a> <a href="/tags/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/" rel="tag"><i class="ic i-tag"></i> 应用程序</a> <a href="/tags/%E9%83%A8%E7%BD%B2/" rel="tag"><i class="ic i-tag"></i> 部署</a></div></div><footer><div class="meta"><span class="item"><span class="icon"><i class="ic i-calendar-check"></i> </span><span class="text">更新于</span> <time title="修改时间：2021-01-19 08:42:42" itemprop="dateModified" datetime="2021-01-19T08:42:42+08:00">2021-01-19</time></span></div><div id="copyright"><ul><li class="author"><strong>本文作者： </strong><i class="ic i-at"><em>@</em></i>小林书架</li><li class="link"><strong>本文链接：</strong> <a href="https://snow.js.org/hexo-gulp-pwa/" title="Hexo：为你的博客配置 PWA">https://snow.js.org/hexo-gulp-pwa/</a></li><li class="license"><strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLW5kLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-ND</span> 许可协议。转载请注明出处！</li></ul></div></footer></article></div><div class="post-nav"><div class="item left"><a href="/num-theory/" itemprop="url" rel="prev" data-background-image="https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;gh&#x2F;SerokSSR&#x2F;cdn&#x2F;8qv7.jpg" title="简单数论"><span class="type">上一篇</span> <span class="category"><i class="ic i-flag"></i> 算法</span><h3>简单数论</h3></a></div><div class="item right"><a href="/hexo-vercel/" itemprop="url" rel="next" data-background-image="https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;gh&#x2F;SerokSSR&#x2F;cdn&#x2F;agd.jpg" title="Hexo：将你的博客部署到 Vercel"><span class="type">下一篇</span> <span class="category"><i class="ic i-flag"></i> Hexo</span><h3>Hexo：将你的博客部署到 Vercel</h3></a></div></div></div><div id="sidebar"><div class="inner"><div class="panels"><div class="inner"><div class="contents panel pjax" data-title="文章目录"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#hexo%E4%BD%BF%E7%94%A8-gulp-%E4%B8%BA%E4%BD%A0%E7%9A%84%E5%8D%9A%E5%AE%A2%E9%85%8D%E7%BD%AE-pwa"><span class="toc-number">1.</span> <span class="toc-text">Hexo：使用 Gulp 为你的博客配置 PWA</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%99%E5%9C%A8%E5%89%8D%E9%9D%A2"><span class="toc-number">1.1.</span> <span class="toc-text">写在前面</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E5%90%AF%E4%B8%BB%E9%A2%98%E7%9B%B8%E5%85%B3%E8%AE%BE%E7%BD%AE"><span class="toc-number">1.2.</span> <span class="toc-text">开启主题相关设置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-manifestjson"><span class="toc-number">1.3.</span> <span class="toc-text">配置 manifest.json</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6"><span class="toc-number">1.4.</span> <span class="toc-text">安装插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA-gulpfilejs-%E6%96%87%E4%BB%B6"><span class="toc-number">1.5.</span> <span class="toc-text">创建 gulpfile.js 文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA-sw-templatejs-%E6%96%87%E4%BB%B6"><span class="toc-number">1.6.</span> <span class="toc-text">创建 sw-template.js 文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0-js-%E8%BF%9B%E4%B8%BB%E9%A2%98"><span class="toc-number">1.7.</span> <span class="toc-text">添加 js 进主题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%AF%B7%E6%8F%92%E5%85%A5%E5%88%B0%E5%A4%B4%E9%83%A8-head-%E4%B9%8B%E5%89%8D"><span class="toc-number">1.7.1.</span> <span class="toc-text">以下代码请插入到头部 &lt;&#x2F;head&gt; 之前：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%AF%B7%E6%8F%92%E5%85%A5%E5%88%B0%E5%BA%95%E9%83%A8-body-%E4%B9%8B%E5%89%8D"><span class="toc-number">1.7.2.</span> <span class="toc-text">以下代码请插入到底部 &lt;&#x2F;body&gt; 之前：</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E8%A1%8C"><span class="toc-number">1.8.</span> <span class="toc-text">运行</span></a></li></ol></li></ol></div><div class="related panel pjax" data-title="系列文章"><ul><li class="active"><a href="/hexo-gulp-pwa/" rel="bookmark" title="Hexo：为你的博客配置 PWA">Hexo：为你的博客配置 PWA</a></li><li><a href="/hexo-vercel/" rel="bookmark" title="Hexo：将你的博客部署到 Vercel">Hexo：将你的博客部署到 Vercel</a></li><li><a href="/butterfly-aplayer/" rel="bookmark" title="Butterfly：添加全局吸底 Aplayer 播放器">Butterfly：添加全局吸底 Aplayer 播放器</a></li></ul></div><div class="overview panel" data-title="站点概览"><div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="image" itemprop="image" alt="" data-src="https://cdn.jsdelivr.net/gh/SerokSSR/cdn2/5339.jpg"><p class="name" itemprop="name"></p><div class="description" itemprop="description">Creator & OIer</div></div><nav class="state"><div class="item posts"><a href="/archives/"><span class="count">31</span> <span class="name">文章</span></a></div><div class="item categories"><a href="/categories/"><span class="count">7</span> <span class="name">分类</span></a></div><div class="item tags"><a href="/tags/"><span class="count">34</span> <span class="name">标签</span></a></div></nav><div class="social"><span class="exturl item github" data-url="aHR0cHM6Ly9naXRodWIuY29tL1Nlcm9rU1NS" title="https:&#x2F;&#x2F;github.com&#x2F;SerokSSR"><i class="ic i-github"></i></span> <span class="exturl item twitter" data-url="aHR0cHM6Ly90d2l0dGVyLmNvbS9uZV9ib25h" title="https:&#x2F;&#x2F;twitter.com&#x2F;ne_bona"><i class="ic i-twitter"></i></span> <span class="exturl item zhihu" data-url="aHR0cHM6Ly93d3cuemhpaHUuY29tL3Blb3BsZS9jaGVuLXhpLTcwLTM4LTIz" title="https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;chen-xi-70-38-23"><i class="ic i-zhihu"></i></span> <span class="exturl item music" data-url="aHR0cHM6Ly9tdXNpYy4xNjMuY29tLyMvdXNlci9ob21lP2lkPXlvdXJpZA==" title="https:&#x2F;&#x2F;music.163.com&#x2F;#&#x2F;user&#x2F;home?id&#x3D;yourid"><i class="ic i-cloud-music"></i></span> <span class="exturl item weibo" data-url="aHR0cHM6Ly93ZWliby5jb20vdS81NDY2MjY5NzEx" title="https:&#x2F;&#x2F;weibo.com&#x2F;u&#x2F;5466269711"><i class="ic i-weibo"></i></span></div><ul class="menu"><li class="item"><a href="/" rel="section"><i class="ic i-home"></i>首页</a></li><li class="item dropdown"><a href="javascript:void(0);"><i class="ic i-feather"></i>文章</a><ul class="submenu"><li class="item"><a href="/archives/" rel="section"><i class="ic i-list-alt"></i>归档</a></li><li class="item"><a href="/categories/" rel="section"><i class="ic i-th"></i>分类</a></li><li class="item"><a href="/tags/" rel="section"><i class="ic i-tags"></i>标签</a></li></ul></li><li class="item"><a href="/friends/" rel="section"><i class="ic i-heart"></i>友人帐</a></li><li class="item"><span class="exturl" data-url="aHR0cHM6Ly9mcmllbmRzLWxpbmsudmVyY2VsLmFwcC8="><i class="ic i-star"></i>留言板</span></li><li class="item"><a href="/about/" rel="section"><i class="ic i-magic"></i>关于</a></li></ul></div></div></div><ul id="quick"><li class="prev pjax"><a href="/num-theory/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a></li><li class="up"><i class="ic i-arrow-up"></i></li><li class="down"><i class="ic i-arrow-down"></i></li><li class="next pjax"><a href="/hexo-vercel/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a></li><li class="percent"></li></ul></div></div><div class="dimmer"></div></div></main><footer id="footer"><div class="inner"><div class="widgets"></div><div class="status"><div class="copyright">&copy; 2020 – <span itemprop="copyrightYear">2021</span> <span class="with-love"><i class="ic i-sakura rotate"></i> </span><span class="author" itemprop="copyrightHolder">@ 小林书架</span></div><div><i class="ic i-tag"></i> <a href="https://icp.gov.moe" target="_blank">萌ICP备 </a><a href="https://icp.gov.moe/?keyword=20201205" target="_blank">20201205号</a></div><div class="powered-by">基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span></div></div></div></footer></div><script data-config type="text/javascript">var LOCAL={path:"hexo-gulp-pwa/",favicon:{show:"（●´3｀●）やれやれだぜ",hide:"(´Д｀)大変だ！"},search:{placeholder:"文章搜索",empty:"关于 「 ${query} 」，什么也没搜到",stats:"${time} ms 内找到 ${hits} 条结果"},copy_tex:!0,katex:!0,fancybox:!0,copyright:'复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-ND 协议。',ignores:[function(e){return e.includes("#")},function(e){return new RegExp(LOCAL.path+"$").test(e)}]}</script><script src="https://cdn.polyfill.io/v2/polyfill.js"></script><script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script><script src="//cdn.jsdelivr.net/gh/SerokSSR/blog-shoka@latest/js/app.js?v=0.2.5"></script><script data-pjax>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?361beab41b2890d7429784b5d0071979";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script></body></html><!-- rebuild by hrmmi -->